/*
*   @Author: 1296
*   @Date: 2025-03-18
*   @Description: 普通签到
*/

<script setup>
import { onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import axios from 'axios'
import router from "@/router";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import store from "@/store";

const { t } = useI18n()
const api = axios.create({
  baseURL: store.getters.getBaseURL
});

const route = useRoute();
onMounted(() => {
  const isVerify = route.query.isVerify;
  if (isVerify === '1' && sessionStorage.getItem(`${route.params.id}`) !== '1') {
    router.push({ path: `/verification/${isVerify}`, query: { section: route.params.id }});
  }
})

// 提交签到
const handleClick = async () => {
  try {
    const jobCode = sessionStorage.getItem('jobCode');
    const response = await api.put('/record/submit', {
      aid: parseInt(route.params.id),
      additionInfo: {
        picture: jobCode
      }
    });

    if (response.data.code === 200) {
      ElMessage.success(t('successSign'));
      setTimeout(() => {
        router.push(`/${jobCode}/personalPage`);
      }, 1000);
    } else {
      ElMessage.error(t('failedSign'));
    }
  } catch (error) {
    console.error('提交失败:', error);
    ElMessage.error(t('requestFailed'));
  }
};

// 拦截器
api.interceptors.request.use(config => {
  const token = sessionStorage.getItem('userToken');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

api.interceptors.response.use(
    response => response,
    error => {
      if (error.response?.status === 401) {
        router.push('/loginAndRegister');
      }
      return Promise.reject(error);
    }
);
</script>

<template>
  <div>
    <div class="sign-button-container">
      <div
          class="sign-button"
          @click="handleClick"
      >
        {{ t('normalSign') }}
      </div>
    </div>
  </div>
</template>

<style scoped>
.sign-button-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  display: flex;
  justify-content: center;
}

.sign-button {
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  min-width: 160px;
  padding: 1rem 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3),
  0 2px 4px -1px rgba(59, 130, 246, 0.2);
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  color: white;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 1px;
}

.sign-button:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.4),
  0 4px 6px -2px rgba(59, 130, 246, 0.3);
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

@media (max-width: 768px) {
  .sign-button {
    min-width: 120px;
  }
}
</style>